<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/element/theme/index.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/public/css/app/app.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/lz/lz.css}">

    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
        }
        * {
            outline: 0;
            padding: 0;
            margin: 0;
            border: 0;
        }
        #app{
            height: 100%;
            overflow: auto;
        }
    </style>
    <template type="x-template" id="head">
        <div class="header">
            <!-- 折叠按钮 -->
            <div class="collapse-btn" @click="collapseChage">
                <i v-if="!collapse" class="el-icon-s-fold"></i>
                <i v-else class="el-icon-s-unfold"></i>
            </div>
            <div class="logo">后台管理系统</div>
            <div class="header-right">
                <div class="header-user-con">
                    <!-- 全屏显示 -->
                    <div class="btn-fullscreen" @click="handleFullScreen">
                        <el-tooltip effect="dark" :content="fullscreen?'取消全屏':'全屏'" placement="bottom">
                            <i class="el-icon-rank"></i>
                        </el-tooltip>
                    </div>
                    <!-- 用户头像 -->
                    <div class="user-avator">
                        <img th:src="@{/public/css/assets/img/img.jpg}" />
                    </div>
                    <!-- 用户名下拉菜单 -->
                    <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link" th:text="${session.name}">
                        <i class="el-icon-caret-bottom"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <a th:href="logout" target="_self">
                                <el-dropdown-item>退出登录</el-dropdown-item>
                            </a>
<!--                            <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>-->
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
    </template>
    <template type="x-template" id="sidebar">
        <div class="sidebar">
            <el-menu
                    class="sidebar-el-menu"
                    :collapse="collapse"
                    :default-active="active"
                    background-color="#324157"
                    text-color="#bfcbd9"
                    active-text-color="#20a0ff"
                    unique-opened
            >
                <template v-for="item in items">
                    <template v-if="item.menus">
                        <el-submenu :index="item.menuCode" :key="item.menuId">
                            <template slot="title">
                                <i :class="item.iconCls"></i>
                                <span slot="title">{{ item.menuName }}</span>
                            </template>
                            <template v-for="subItem in item.menus">
                                <el-submenu
                                        v-if="subItem.menus"
                                        :index="subItem.menuCode"
                                        :key="subItem.menuId"
                                >
                                    <template slot="title">{{ subItem.menuName }}</template>
                                    <el-menu-item
                                            v-for="(threeItem,i) in subItem.menus"
                                            :key="i"
                                            :index="threeItem.menuCode"
                                            :path="threeItem.url"
                                            @click="handClick(threeItem)"
                                    >{{ threeItem.menuName }}</el-menu-item>
                                </el-submenu>
                                <el-menu-item
                                        v-else
                                        :index="subItem.menuCode"
                                        :key="subItem.menuId"
                                        :path="subItem.url"
                                        @click="handClick(subItem)"
                                >{{ subItem.menuName }}</el-menu-item>
                            </template>
                        </el-submenu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="item.menuCode" :key="item.menuId" :path="item.url" @click="handClick(item)">
                            <i :class="item.iconCls"></i>
                            <span slot="title">{{ item.menuName }}</span>
                        </el-menu-item>
                    </template>
                </template>
            </el-menu>
        </div>
    </template>
</head>
<body>
<div id="app">
    <div class="wrapper">
        <v-head></v-head>
        <v-sidebar ref="sidebar" @add-tab="addTab"></v-sidebar>
        <div class="content-box" :class="{'content-collapse':collapse}">
            <lz-tabs :tabs="tabList" :active="active" @update-tabs="updateTabs" @update-active="updateActive" ref="tabs"></lz-tabs>
        </div>
    </div>
</div>
</body>
<script th:src="@{/public/js/app/app.js}" type="text/javascript"></script>
<script th:src="@{/plugins/vue.js}" type="text/javascript"></script>
<script th:src="@{/plugins/element/js/index.js}" type="text/javascript"></script>
<script th:src="@{/plugins/axios/axios.min.js}" type="text/javascript"></script>
<script th:src="@{/plugins/lz/lz.umd.js}" type="text/javascript"></script>
<script th:inline="javascript">
    var context = [[@{/}]];
</script>
<script>
    const bus = new Vue();
    const vHead = {
        template: "#head",
        data() {
            return {
                collapse: false,
                fullscreen: false,
                name: 'linxin',
                message: 2
            };
        },
        computed: {},
        methods: {
            // 用户名下拉菜单选择事件
            handleCommand(command) {
            },
            // 侧边栏折叠
            collapseChage() {
                this.collapse = !this.collapse;
                bus.$emit('collapse', this.collapse);
            },
            // 全屏事件
            handleFullScreen() {
                let element = document.documentElement;
                if (this.fullscreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                }
                this.fullscreen = !this.fullscreen;
            }
        },
        mounted() {
        }
    };

    const vSidebar = {
        template: "#sidebar",
        data() {
            return {
                active: "",
                collapse: false,
                selectNode: {},
                items: []
            };
        },
        computed: {},
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handSelect(key, keyPath) {
                this.selectNode = null;
                this.getNode(key, this.items);
            },
            getNode(index, items) {
                for (var i = 0; i < items.length; i++) {
                    if (this.selectNode != null) {
                        break;
                    }
                    if (items[i].subs && items[i].subs.length > 0) {
                        this.getNode(index, items[i].subs);
                    } else {
                        if (index == items[i].index) {
                            this.selectNode = items[i];
                            break;
                        }
                    }
                }
            },
            handClick(item) {
                console.info(item);
                this.$emit("add-tab",item);
            },
            setActive(active){
                this.active=active;
            }
        },
        mounted() {

        },
        created() {
            bus.$on('collapse', msg => {
                this.collapse = msg;
                bus.$emit('collapse-content', msg);
            });
            bus.$on('activemenu', msg => {
                this.active = msg;
            });
            bus.$on('items', msg => {
                this.items = msg;
            });
        }
    };


    var vm = new Vue({
        el: '#app',
        data: function() {
            return {
                collapse: false,
                tabList:[{
                    id:'first1',
                    name:'首页',
                    url:context+"main"
                }],
                active:'first1'
            }
        },
        components:{
            'v-head':vHead,
            'v-sidebar':vSidebar
        },
        methods:{
            async initItems(){
                var res = {};
                await axios.get(context+'getMenus?pCode=m_00')
                    .then(response => {
                        res = response.data;
                        bus.$emit('items', res);
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
                return res;
            },
            updateTabs(tabList){
                this.tabList=tabList;
            },
            updateActive(active){
                this.active=active;
                this.$refs.sidebar.setActive(active);
            },
            addTab(item){
                this.$refs.tabs.addTab({
                    id:item.menuCode,
                    name:item.menuName,
                    url: context+item.url,
                    allowClose:true
                });
            },
            aa(){
                console.log(this.$refs.tabs)
            }
        },
        created() {
            this.initItems();
            bus.$on('collapse-content', msg => {
                this.collapse = msg;
            });
        }
    });

</script>
</html>